<template>
  <div class="dialog" @click.self="$emit('close')">
    <div class="d-con">
      <button @click="$emit('clear')">清空购物车</button>
      <ul>
        <li v-for="(item,i) in buyList" :key="i">
          <span>{{item.title}}</span>
          <span>{{item.price}}</span>
          <el-count :num="item.num" :id="item.id"></el-count>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import elCount from './elCount'
export default {
  props:['buyList'],
  components:{
    elCount
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .dialog{
    width:100%;
    height: 100%;
    position: absolute;
    top:0;
    left:0;
    background: rgba(0,0,0,.9);
    .d-con{
      width:100%;
      position: absolute;
      bottom:0;
      left:0;
      background: #fff;
    }
  }
</style>
